import { Module } from 'vuex'
import _ from 'lodash'
import readSettingStateTypes from './types'
import { ReadSetting } from '@/common/types'
import RootStateTypes from '../../types'
import { setStore, getStore } from '@/utils/store'

const readSettingModule: Module<readSettingStateTypes, RootStateTypes> = {
  namespaced: true,
  state: {
    readSetting: getStore({
      name: 'readSetting'
    }) || {
      skin: 'skin-default',
      fontSize: 16
    },
    lastSkin: 'skin-default'
  },
  mutations: {
    SET_READ_SETTING(state: readSettingStateTypes, readSetting: ReadSetting) {
      state.readSetting = readSetting
    },
    SET_LAST_SKIN(state: readSettingStateTypes, skin: string) {
      state.lastSkin = skin
    }
  },
  actions: {
    saveReadSetting({ commit }, readSetting: ReadSetting) {
      return new Promise((resolve) => {
        if (readSetting.skin !== 'skin-dark') {
          commit('SET_LAST_SKIN', readSetting.skin)
        }
        commit('SET_READ_SETTING', readSetting)
        setStore({ name: 'readSetting', content: readSetting })
        resolve('ok')
      })
    }
  }
}

export default readSettingModule
